<template>
  <div class="run-params-wrapper scroll-box">
    <ul
      class="run-params-container"
      v-if="modelList.length"
    >
      <template v-for="(item, index) in modelList">
        <li
          :key="index"
          v-if="index < 18"
        >
          <p class="params">{{ item.one }}</p>
          <p class="value">
            <span>{{ item.val }}</span>
            {{ item.three }}
          </p>
        </li>
      </template>
    </ul>
    <div
      class="no-data-box"
      v-if="noDataState"
    >暂无数据</div>
  </div>

</template>

<script>
import { getModelDetail } from '@/api/deviceManage.js';

export default {
  name: 'RunParams',
  inject: ['parent'],
  data() {
    return {
      modelList: [],
      socket: '',
      noDataState: false
    };
  },
  created() {
    console.log('RunParams');
  },
  mounted() {
    // this.socket = this.parent.socket;
    this.getModelDetail();
  },
  methods: {
    // 获取物模型详情
    getModelDetail() {
      getModelDetail({
        id: this.$route.query.modelId
      })
        .then(res => {
          const list = res.data.param ? JSON.parse(res.data.param) : [];
          let tempArr = [];
          list.forEach(item => {
            if (Array.isArray(item)) {
              tempArr = tempArr.concat(item);
            } else {
              tempArr.push(item);
            }
          });
          this.modelList = tempArr;
          if (!this.modelList.length) {
            this.noDataState = true;
          } else {
            this.modelList.map(item => {
              item.val = '-';
            });
          }
        })
        .then(() => {
          this.websocketFn();
        });
    },
    websocketFn() {
      const param = {
        device_id: this.$route.query.id,
        product_id: this.$route.query.modelId,
        type: 2,
        is_single: true //是否单独监听此设备， 若为true 则客户端只会监听此设备
      };
      if (this.socket) {
        this.socket.send(JSON.stringify(param));
      } else {
        let token = localStorage.getItem('token');
        this.socket = new WebSocket(`ws://${location.host}/base/iot_websocket/ws/`, [token]);
        this.socket.onopen = res => {
          this.socket.send(JSON.stringify(param));
        };
      }

      this.socket.onmessage = res => {
        if (res.data) {
          const data = JSON.parse(res.data);
          const points = data.Record ? data.Record.Points : [];

          let arr = this.modelList.map(item => {
            let fourVal = item.four;
            points.forEach(subItem => {
              if (fourVal === subItem.K) {
                item.val = subItem.V;
              }
            });
            return item;
          });

          this.modelList = arr;
          this.modelList.map(item => {
            item.val = item.val === false || item.val === 0 ? item.val : '-';
          });
        }
      };

      this.socket.onclose = res => {
        console.log('Connection closed.');
      };

      this.socket.onerror = () => {
        console.log('Connection error');
      };
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.run-params-wrapper {
  width: 100%;
  height: 100%;
}
.run-params-container {
  width: 100%;
  height: 100%;
  padding-bottom: 0.213333rem;

  li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 4.88rem;
    height: 2.053333rem;
    margin-top: 0.213333rem;
    padding: 0.426667rem 0.32rem;
    background-color: #fff;

    &:nth-of-type(odd) {
      float: left;
    }

    &:nth-of-type(even) {
      float: right;
    }

    .params {
      position: relative;
      padding-left: 0.213333rem;
      font-size: 0.373333rem;
      color: var(--color-deep-gray);

      &::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 0;
        width: 0.053333rem;
        height: 0.32rem;
        background-color: var(--color-primary);
      }
    }

    .value {
      display: flex;
      align-items: center;
      font-size: 0.346667rem;
      color: var(--color-gray);

      span {
        margin-right: 0.106667rem;
        color: var(--color-black);
        font-size: 0.426667rem;
      }
    }
  }
}
</style>